<template>
  <div class="person-wrap" style="overflow:hidden;">
    <div class="content">
      <div class="icon" :style="`background-image:url(${user.headimgurl});`"></div>
      <div class="name">{{user.nickname}}</div>
      <div class="goods">
        <div class="title">
          <img class="img" :src="this.giftPng" /> 我的奖品
        </div>
        <div class="list touchmove_enable">
          <div class="card" v-for="plize in plizes" v-if="plize.status=='n'" :key="plize.id">
            <div class="card-box">
              <div class="fl left">
                <div class="name">{{plize.name}}</div>
                <!-- <div class="name">手表外观清洗</div> -->
              </div>
              <div class="fl right">
                <div class="code" @touchstart="touchstart(plize.id,plize.rulesId)" @touchend="touchend(plize.id,plize.rulesId)" :style="`background-image:url(${plize.url});`"></div>
                <div class="code-bottom">按二维码领取</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "./style.css";
import giftPng from "./image/gift.png";

import common from "../../../wechat/static/common/common";

const getPrizeURL =
  "https://harmonygame.icebartech.com/api/html5/user/score/findUserPrize";

const getUserRankURL =
  "https://harmonygame.icebartech.com/api/html5/user/rank/findUserRank";

const chargeURL =
  "https://harmonygame.icebartech.com/api/html5/user/score/userReceive";

export default {
  data() {
    return {
      giftPng,
      plizes: [],
      user: {}
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    touchstart(id, rulesId) {
      console.log("touchstart");
      this.rulesId = rulesId;
      this.id = id;
      this.touchStartDate = new Date();
    },
    touchend(id, rulesId) {
      if (
        id == this.id &&
        rulesId == this.rulesId &&
        (this.touchStartDate &&
          new Date().getTime() - this.touchStartDate.getTime()) > 1000
      ) {
        this.charge(rulesId);
      }
      this.touchStartDate = undefined;
    },
    async getUserInfo() {
      this.sessionId = common.getCookie("sessionId");
      let res = await this.$http.post(
        `${getUserRankURL}?sessionId=${this.sessionId}`,
        {},
        { emulateJSON: true }
      );
      if (res.data.data.bussData) {
        let [user, allUserInfo] = res.data.data.bussData;
        if (user) {
          this.user = user;
        }
      }
    },
    async init() {
      await this.getUserInfo();
      await this.getPrize();
    },
    async getPrize() {
      if (!this.sessionId) {
        this.sessionId = common.getCookie("sessionId");
      }
      let res = await this.$http.post(
        `${getPrizeURL}?sessionId=${this.sessionId}`,
        {},
        { emulateJSON: true }
      );
      if (res.data.data.bussData) {
        let plizes = res.data.data.bussData;
        this.plizes = plizes;
      }
    },
    async charge(rulesId) {
      if (!this.sessionId) {
        this.sessionId = common.getCookie("sessionId");
      }
      let res = await this.$http.post(
        `${chargeURL}?sessionId=${this.sessionId}`,
        {
          rulesId
        },
        { emulateJSON: true }
      );
      if (res.data.data && res.data.data.bussData) {
        this.getPrize();
        alert("领取成功");
      } else {
        alert("领取失败");
      }
    }
  }
};
</script>

